<template>
  <view class="custorm-service-container">
    <nav-bar title="用户协议"></nav-bar>
    <view class="custorm-service-body">
      <view class="custorm-service-list">
        <view class="custorm-service-item" v-for="(item, index) in questionList" :key="index" @click="itemClick(index)">
            <view class="custorm-service-item-top">
                <view  class="custorm-service-item-top-title">{{item.title}}</view>
                <image src="@/static/user/right.svg" class="custorm-service-item-image" :class="{'custorm-service-item-image-active': showContentList[index]}">
            </view>
            <scroll-view class="custorm-service-item-bottom" :class="{'custorm-service-item-bottom-active': showContentList[index]}">
                <view>
                    {{item.content}}
                </view>
            </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from 'components/NavBar'
export default {
    components: {
        NavBar
    },
  data() {
    let questionList = [
        {
          title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
          content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        },
        {
          title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
          content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        },
        {
          title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
          content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        },
        {
          title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
          content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        },

      ];
    let showContentList = new Array(questionList.length).fill(false)
    return {
      questionList: questionList,
      showContentList: showContentList,
    };
  },
  methods: {
      itemClick(index){
          let arr = Array.from(this.showContentList);
          if(!arr[index]) {
              arr.map((item, index) => {
                  arr[index] = false
              })
          }
          arr[index] = !arr[index];
          this.showContentList = arr;
          console.log(this.showContentList[index]);
      }
  },
};
</script>

<style scoped>
.custorm-service-body {
    box-sizing: border-box;
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
}
.custorm-service-list {
    box-sizing: border-box;
    padding: 40rpx;
    width: 100%;
    box-shadow: 0 0 10rpx #999;
}
.custorm-service-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2rpx solid #999;
    padding-top: 40rpx;
}
.custorm-service-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
            margin-bottom: 40rpx;
}
.custorm-service-item-bottom {
    height: 0rpx;
    transition: height .5s;
    overflow: hidden;
    font-size: 32rpx;
    font-weight: bold;
}
.custorm-service-item-bottom-active {
   height: 160rpx;
   transition: height .5s;
}
.custorm-service-item-image {
    height: 32rpx;
    width: 32rpx;
    transition: transform .5s;
}
.custorm-service-item-image-active {
    transform: rotate(90deg);
}
</style>